<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Personal History</title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
  </head>
  <body>
    <!-- <svg width="800" height="800" id="mainsvg" class="svgs" style="background-color: #ffffff;"></svg> -->
    <script src="./d3.min.js"></script>
    <div id="wrapper">
      <nav class="navbar navbar-default top-navbar" role="navigation">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="index.html">高管宝典</a>
          </div>  
      </nav>
      <!--/. NAV TOP  -->
      <nav class="navbar-default navbar-side" role="navigation">
          <div class="sidebar-collapse">
              <ul class="nav" id="main-menu">
                  <li>
                      <a href="index.html"><i class="fa fa-dashboard"></i>概览</a>
                  </li>
                  <li>
                      <a href="race.html?feature=institute"><i class="fa fa-desktop"></i> 时间追逐柱状图</a>
                  </li>
                  <li>
                      <a href="statistics.html?feature=age,salary"><i class="fa fa-bar-chart-o"></i> 多因素统计</a>
                  </li>
                  <li>
                    <a class="active-menu" href="personal.html?name=张锡康"><i class="fa fa-search"></i> 个人搜索</a>
                    </li>
                    <li>
                        <a href="map.html"><i class="fa fa-arrows"></i> 关系映射图 </a>
                    </li>
              </ul>

          </div>

      </nav>
      <!-- /. NAV SIDE  -->
      <div id="page-wrapper">
          <div id="page-inner">
            <div class="row">
              <div class="col-md-12">
                  <h1 class="page-header">
                      个人信息检索 <small>一键检索教育、就职、任教经历</small>
                  </h1>
              </div>
          </div>

          <form id="dataTables-example_filter" class="dataTables_filter" style="display: flex; align-items: center;" onsubmit="event.preventDefault(); window.location.href = 'personal.html?name=' + encodeURIComponent(this.elements[0].value);">
            <label style="flex: none;">Search Name:</label>
            <input type="search" class="form-control input-sm" aria-controls="dataTables-example" style="margin-left: 20px; flex: none; width: 200px;"> 
            <button type="submit" class="btn btn-default" style="margin-left: 10px; flex: none;">Submit</button>
        </form>
        
            <!-- <div id="dataTables-example_filter" class="dataTables_filter" style="display: flex; align-items: center; margin-bottom: 20px;">
                <label style="margin-left: 30px;">Search:</label>
                <input type="search" class="form-control input-sm" aria-controls="dataTables-example" style="margin-left: 20px; min-width: 100px; max-width: 200px;"> 
                <button type="submit" class="btn btn-default" style="margin-left: 10px;">Submit</button>
            </div> -->
        

          <div id="my_dataviz"></div>
          <div id="my_dataviz2"></div>
          <div id="my_dataviz3"></div>
          <script>
                //  style="text-align: center"
              const draw_timetable = function(data, div, itemname){
                    start_year = data["start_year"]
                    end_year = data["end_year"]
                    person_name = data["name"]
                    data = data["posn_line"]
                    // Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
                    const myGroups = Array.from({length: end_year-start_year+1}, (_, index) => (index + start_year).toString());
                    console.log(myGroups)
                    const myVars = Array.from(new Set(data.map(d => d.variable)))

                    // set the dimensions and margins of the graph
                    const margin = {top: 80, right: 25, bottom: 30, left: 100},
                    width = 1175 - margin.left - margin.right,
                    height = 40*myVars.length + 30;

                    // append the svg object to the body of the page
                    const svg = div
                    .append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", `translate(${margin.left}, ${margin.top})`);

                    String.prototype.hashCode = function() {
                        var hash = 0,
                        i, chr;
                        if (this.length === 0) return hash;
                        for (i = 0; i < this.length; i++) {
                        chr = this.charCodeAt(i);
                        hash = ((hash << 5) - hash) + chr;
                        hash |= 0; // Convert to 32bit integer
                        }
                        return hash;
                    }

                    // const str = '我是一个高管'
                    // console.log(str, str.hashCode())

                    // Build X scales and axis:
                    const x = d3.scaleBand()
                    .range([ 0, width ])
                    .domain(myGroups)
                    .padding(0);
                    svg.append("g")
                    .style("font-size", 15)
                    .attr("transform", `translate(0, ${height})`)
                    .call(d3.axisBottom(x).tickSize(0))
                    .select(".domain").remove()

                    // Build Y scales and axis:
                    const y = d3.scaleBand()
                    .range([ height, 0 ])
                    .domain(myVars)
                    .padding(0.2);
                    svg.append("g")
                    .style("font-size", 15)
                    .style("font-weight", "bold")
                    .call(d3.axisLeft(y).tickSize(0))
                    .select(".domain").remove()

                    // Build color scale
                    const myColor = d3.scaleSequential()
                    .interpolator(d3.interpolateRainbow) // 参考http://using-d3js.com/04_05_sequential_scales.html
                    .domain([0,100])

                    // create a tooltip
                    const tooltip = div
                        .append("div")
                        .style("opacity", 0)
                        .attr("class", "tooltip")
                        .style("background-color", "white")
                        .style("position", "absolute")
                        //.style("width", "200px")
                        //.style("height", "50px")
                        .style("border", "solid")
                        .style("border-width", "2px")
                        .style("border-radius", "5px")
                        .style("padding", "5px")

                    // Three function that change the tooltip when user hover / move / leave a cell
                    const mouseover = function(event,d) {
                        tooltip.style("opacity", 0.8)
                        .style("left", (event.x+10) + "px")
                        .style("top", (event.y+10) + "px");
                        d3.select(event.currentTarget).style("stroke", "#FFA500")
                        .style("stroke-width", "4px")
                        .style("opacity", 0.8)
                    }
                    const mousemove = function(event,d) {
                        tooltip
                        .html(d.group + "年: <br>" + d.value)
                        .style("left", (event.x+10) + "px")
                        .style("top", (event.y+10) + "px")
                    }
                    const mouseleave = function(event, d) {
                        tooltip.style("opacity", 0);
                        d3.select(event.currentTarget).style("stroke-width", "0px")
                        .style("opacity", 0.6)
                    }

                    // add the squares
                    datacopy = svg.selectAll()
                    .data(data, function(d) {return d.group+':'+d.variable;}).enter().append("g")
                    .attr("transform", d => `translate(${x(d.group)}, ${y(d.variable)})`)

                    datacopy.filter(d => d.display_value != "").raise()


                    datacopy.append("rect")
                        //.attr("rx", 4)
                        //.attr("ry", 4)
                        .attr("width", 0 )
                        .attr("height", y.bandwidth() )
                        .style("fill", function(d) { console.log(String(d.value).hashCode()%100); return myColor(String(d.value).hashCode()%100)} )
                        .style("opacity", 0.6)
                        .on("mouseover", mouseover)
                        .on("mousemove", mousemove)
                        .on("mouseleave", mouseleave)
                        .transition()   // 开始过渡动画
                        .duration(200) // 动画持续时间，单位为毫秒
                        .delay(function(d, i) { return x(d.group)/x.bandwidth() * 200; }) // 动画延迟时间，让每个矩形依次出现，单位为毫秒
                        .ease(d3.easeLinear)
                        .attr("width", x.bandwidth())

                    datacopy.append("text")
                    .attr("x", function(d) { return 7 })
                    .attr("y", function(d) { return 20 })
                    //.style("text-anchor", "middle")
                    .text(function(d) { 
                        return d.display_value ;
                      //console.log(d.display_value.length);
                      //if (d.display_value.length <= 7){
                      //    return d.display_value 
                      //} else {
                      //    return d.display_value.substring(0, 7)+".."
                      //}
                    })
                    .style("font-size", "12px")
                    .attr("opacity", 0)
                    .transition()   // 开始过渡动画
                    .duration(200) // 动画持续时间，单位为毫秒
                    .delay(function(d, i) { return x(d.group)/x.bandwidth() * 200; }) // 动画延迟时间，让每个矩形依次出现，单位为毫秒
                    .ease(d3.easeLinear)
                    .attr("opacity", 1)
                    // .attr("display", d => d.display_value != "" ? "block" : "none")

                    // Add title to graph
                    svg.append("text")
                    .attr("x", 0)
                    .attr("y", -50)
                    .attr("text-anchor", "left")
                    .style("font-size", "22px")
                    .text(`${person_name}${itemname}经历`);
                    console.log(data)

                    // Add subtitle to graph
                    svg.append("text")
                        .attr("x", 0)
                        .attr("y", -20)
                        .attr("text-anchor", "left")
                        .style("font-size", "14px")
                        .style("fill", "grey")
                        .style("max-width", 400)
                        .text("用时间轴展示个人发展脉络");
                    svg.selectAll("text").raise()
              }  

              //Read the data
              name = window.location.search.split("=")[1];
              xhr = new XMLHttpRequest();
              xhr.open('POST', 'http://127.0.0.1:5000/login', true);
              xhr.setRequestHeader('Content-Type', 'application/json');  // 设置POST传参的请求头(JSON)
              xhr.onreadystatechange = function () {
                  if (xhr.readyState !== 4) return;  // readyState == 4 -> 已接收到全部响应数据
                  if (xhr.status < 200 || xhr.status >= 300) return;  // 200 <= status <= 299 -> 请求成功
                  data = JSON.parse(xhr.responseText)
                  console.log(data)
                  draw_timetable(data["company"], d3.select("#my_dataviz"), "就职") 
                  draw_timetable(data["education"], d3.select("#my_dataviz2"), "教育") 
                  draw_timetable(data["institute"], d3.select("#my_dataviz3"), "任教") 

              };
            xhr.send(JSON.stringify({type: "people_info", query_name: name, password: 123456}));  // 发送请求, 这里设置POST请求的附加参数
          </script>

      </div>
      <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
    </div>
    <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>

    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- Morris Chart Js -->
    <script src="assets/js/morris/raphael-2.1.0.min.js"></script>
    <script src="assets/js/morris/morris.js"></script>


    <script src="assets/js/easypiechart.js"></script>
    <script src="assets/js/easypiechart-data.js"></script>


    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>
  </body>
</html>